{extend name="template/base" /}
{block name="style"}
<!--<link rel="stylesheet" type="text/css" href="__LIB__/treeTable-v1.4.2/script/treeTable/default/jquery.treeTable.css" />-->
<style>
.tree_table .vsStyle_node, .tree_table .vsStyle_active_node {width:16px;height:16px;border: medium none; margin: 0; padding: 0;display: inline-block;}
.tree_table .vsStyle_active_node {cursor: pointer;}
.tree_table .vsStyle_open, .tree_table .vsStyle_last_open{background:url(__LIB__/treeTable-v1.4.2/script/treeTable/vsStyle/allbgs.png) no-repeat 0px 0px;width:16px;}
.tree_table .vsStyle_shut, .tree_table .vsStyle_last_shut{background:url(__LIB__/treeTable-v1.4.2/script/treeTable/vsStyle/allbgs.png) no-repeat -16px 0px;width:16px;}
.tree_table .vsStyle_hover_open, .tree_table .vsStyle_hover_last_open{background:url(__LIB__/treeTable-v1.4.2/script/treeTable/vsStyle/allbgs.png) no-repeat -32px 0px;width:16px;}
.tree_table .vsStyle_hover_shut, .tree_table .vsStyle_hover_last_shut{background:url(__LIB__/treeTable-v1.4.2/script/treeTable/vsStyle/allbgs.png) no-repeat -48px 0px;width:16px;}

</style>
{/block}
{block name="content"}
<div class="page-container">
    {include file="form" /}
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            {tp:menu menu="add,forbid,resume,delete,recyclebin" /}
        </span>
        <span class="r pt-5 pr-5">
            共有数据 ：<strong>{$count ?? '0'}</strong> 条
        </span>
    </div>
    <table id="treeTable1" class="table table-border table-bordered table-hover table-bg mt-20">
        <thead>
            <tr class="text-c">
                {include file="th" /}
                <th width="150">操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name="list" id="vo"}
            {php}
                $_pids[]=$vo['id'];
            {/php}
            <tr id="{$vo['id']}"   pId="{:getPraent($vo['id'],$_pids,'tp_driver_rank_tree')}" class="text-c">
                {include file="td" /}
                <td class="f-14">
                    {$vo.status|show_status=$vo.id}
                    <a title="添加" href="javascript:;" onclick="layer_open('添加','/admin/driver_rank/add/pid/{$vo.id}.html')" style="text-decoration:none" class="ml-5 Hui-iconfont Hui-iconfont-add"></a>
                    {tp:menu menu='sedit' /}
                    {tp:menu menu='sdelete' /}
                </td>
            </tr>
            {/volist}
        </tbody>
    </table>
    <div class="page-bootstrap">{$page ?? ''}</div>
</div>
{/block}
{block name="script"}
<!--引用的文件 Begin-->
<script src="__LIB__/treeTable-v1.4.2/script/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<!--引用的文件 End-->
<script type="text/javascript">
    $(function () {
        var option = {
            theme: 'vsStyle',
            expandLevel: 5,
            column: 1,
            beforeExpand: function ($treeTable, id) {
                //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                if ($('.' + id, $treeTable).length) {
                    return;
                }
                //这里的html可以是ajax请求
                var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
                        + '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';

                $treeTable.addChilds(html);
            },
            onSelect: function ($treeTable, id) {
                window.console && console.log('onSelect:' + id);

            }
        };
        $('#treeTable1').treeTable(option);
    });
</script>

<script>
    $(function () {
        // $("[name='type']").find("[value='{$Request.param.type}']").attr("selected", true);
    })
</script>
{/block}

